import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import base_url from "./http/base.js";

// 将axios工具绑定到vue实例的原型中：
// 目的：为了在任何vue组件中都能够使用this.$axios获取axios工具
// import axios from "axios";
import axios from "./http/request";
import qs from "qs";

//引入Element UI
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
// // import ElementUI from "element-ui";
// // import "element-ui/lib/theme-chalk/index.css";

//引用i18n
// import { createI18n } from "vue-i18n";
// import enLocale from "element-plus/lib/locale/lang/en"; //引入Element UI的英文包
// import zhLocale from "element-plus/lib/locale/lang/zh-cn"; //引入Element UI的中文包
import i18n from "./VueI18n/i18n";

var vue = createApp(App);
vue.use(store).use(router).mount("#app");
// // import common from './common/common'
// Vue.prototype.$axios = axios;

console.log(axios);
vue.config.globalProperties.$axios = axios; // 类似于aJAX请求
// // Vue.prototype.$qs = qs; // 使用 sq 插件对 axios 中 json 数据进行转换
vue.config.globalProperties.$qs = qs; // 使用 sq 插件对 axios 中 json 数据进行转换
// // Vue.prototype.$common=common;
// const i18n = createI18n({
//   locale: localStorage.getItem("lan") || "zh", // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换
//   messages: {
//     zh: Object.assign(require("./VueI18n/language-zh.json"), zhLocale),
//     en: Object.assign(require("./VueI18n/language-en.json"), enLocale),
//   },
//   // messages:{
//   //  'zh': Object.assign(require('./VueI18n/language-zh.json'), require('./VueI18n/demo-zh.json')),
//   //  'en': Object.assign(require('./VueI18n/language-en.json'), require('./VueI18n/demo-en.json'))
//   // }
// });

// 国际化
vue.use(i18n); // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件

vue.use(ElementPlus, {
  i18n: (key, value) => i18n.t(key, value),
}); //兼容i18n 7.x版本设置

// // 开发模式：npm run dev是前端自己开发用的
// // 生产模式：npm run build 打包之后给后端放在服务端上用的
// // Vue.config.productionTip = false
// // 1
// // 上面这行代码的意思 是阻止显示生产模式的消息。
// // 如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。

// // You are running Vue in development mode.
// // Make sure to turn on production mode when deploying for production.

// 大概意思就是：
// 你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。
vue.config.productionTip = false;

// axios.get("./config.json").then((res) => {
//   // 跨域站点解决方案
//   // 把后台域名作为属性挂载到VUE属性上去。
//   //   Vue.prototype.base_url = res.data.base_url;
//   vue.config.globalProperties.base_url = res.data.base_url;
// });

vue.config.globalProperties.base_url = base_url.url;

// // http request拦截器 添加一个请求拦截器
// axios.interceptors.request.use(
//   function (config) {
//     config.baseURL = vue.config.globalProperties.base_url;
//     config.withCredentials = true; // 允许携带token ,这个是解决跨域产生的相关问题
//     config.timeout = 600000;

//     // Do something before request is sent
//     //window.localStorage.getItem("accessToken") 获取token的value

//     if (config.url.indexOf("/uservue/login") > -1) {
//       return config; // 登录接口排除 不需要token
//     } else {
//       let token = window.localStorage.getItem("token");
//       if (token) {
//         //将token放到请求头发送给服务器,将tokenkey放在请求头中
//         config.headers.token = token;
//         //也可以这种写法
//         // config.headers['token'] = token;
//         return config;
//       } else {
//         // 直接输入地址 ，没有经过认证
//         router.replace({
//           path: "/login",

//           // query: {redirect: router.currentRoute.fullPath}
//         });
//       }
//     }
//   },
//   function (error) {
//     // Do something with request error
//     return Promise.reject(error);
//   }
// );
// // 添加一个响应拦截器
// axios.interceptors.response.use(
//   function (response) {
//     // Do something with response data
//     if (response.status == 200 && response.headers.token) {
//       localStorage.setItem("token", response.headers.token); //存token
//       return response;
//     }
//   },
//   function (error) {
//     // Do something with response error
//     if (error.response) {
//       switch (error.response.status) {
//         // 返回401，清除token信息并跳转到登录页面
//         case 401:
//           localStorage.removeItem("token");
//           router.replace({
//             path: "/login",
//             //登录成功后跳入浏览的当前页面
//             // query: {redirect: router.currentRoute.fullPath}
//           });
//       }
//       // 返回接口返回的错误信息
//       return Promise.reject(error.response.data);
//     }
//     return Promise.reject(error);
//   }
// );

// 一般我们都是在main.js中引入vue，然后在vue文件中直接使用this（this指向的是vue实例），
// 但是在实际开发中，我们往往会引入外部的js文件使用this，这个this就会指向window，
// 并不是我们期待的vue实例，那么就需要重新引入vue文件（import Vue from 'vue'）,
// 这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例，然后在需要使用的js中引入。
export default vue;
